<template>
  <view class="invitation-detail-count">
    <view class="container">
      <Header transparent="auto" :title="title" titleColor="#FFF" varietyTitleColor="#000"></Header>
      <view class="user-info-count">
        <view v-if="userName" class="user-info">
          <TImage
            :src="avatar"
            width="96rpx"
            height="96rpx"
            border="4rpx solid #FFF"
            border-radius="50%"
            errorImgType="person"
          ></TImage>
          <view class="info">
            <view class="name-box">
              <text class="name">{{ userName }}</text>
              <view v-if="memberLevelName" class="member-level-name">{{ memberLevelName }}</view>
            </view>
            <view class="org">{{ companyName }}</view>
          </view>
        </view>
        <view v-if="userName" class="count-box">
          <view class="count">
            <text class="num">{{ registerNum }}</text>
            <text class="title">报名人数</text>
          </view>
          <view class="gap"></view>
          <view class="count">
            <text class="num">{{ browsePeopleNum }}</text>
            <text class="title">浏览人数</text>
          </view>
          <view class="gap"></view>
          <view class="count">
            <text class="num">{{ browseNum }}</text>
            <text class="title">浏览次数</text>
          </view>
        </view>
        <view v-else class="count-box">
          <view class="count">
            <text class="num">{{ browseNum }}</text>
            <text class="title">浏览次数</text>
          </view>
          <view class="gap"></view>
          <view class="count">
            <text class="num">{{ browsePeopleNum }}</text>
            <text class="title">浏览人数</text>
          </view>
          <view class="gap"></view>
          <view class="count">
            <text class="num">{{ registerNum }}</text>
            <text class="title">报名总数</text>
          </view>
        </view>
      </view>
      <view class="list-box">
        <slot name="list"></slot>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import Header from '@/components/Header/index.vue';
  import TImage from '@/components/TImage/index.vue';
  const props = defineProps({
    /**
     * 浏览次数
     */
    browseNum: {
      type: Number,
      default: 0,
    },
    /**
     * 浏览人数
     */
    browsePeopleNum: {
      type: Number,
      default: 0,
    },
    /**报名人数 */
    registerNum: {
      type: Number,
      default: 0,
    },
    /**
     * 名字
     */
    userName: {
      type: String,
      default: '',
    },
    /**
     * 职务名称
     */
    memberLevelName: {
      type: String,
      default: '',
    },
    /**机构 */
    companyName: {
      type: String,
      default: '',
    },
    /**
     * 头像
     */
    avatar: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '邀约详情',
    },
  });
</script>
<style lang="scss" scoped>
  .invitation-detail-count {
    background-color: #2878ff;
    min-height: 100vh;
    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      .user-info-count {
        padding: 32rpx;
        .user-info {
          display: flex;
          align-items: center;
          gap: 24rpx;
          margin-bottom: 20rpx;
          .info {
            display: flex;
            flex-direction: column;
            gap: 8rpx;
            .name-box {
              display: flex;
              align-items: center;
              gap: 8rpx;
              .name {
                color: #fff;
                font-size: 32rpx;
                font-weight: 400;
                line-height: 48rpx;
              }
              .member-level-name {
                display: flex;
                padding: 4rpx 12rpx;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 2px;
                background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
                color: var(---Brand2, #ea5e0e);
                font-size: 20rpx;
                font-weight: 400;
                line-height: 28rpx;
                margin-left: 8rpx;
              }
            }
            .org {
              color: #fff;
              font-size: 28rpx;
              font-weight: 400;
              line-height: 40rpx;
            }
          }
        }
        .count-box {
          display: flex;
          gap: 8rpx;
          align-items: center;
          justify-content: center;
          .gap {
            width: 2rpx;
            height: 80rpx;
            background: linear-gradient(
              180deg,
              rgba(235, 237, 240, 0) 0%,
              #ebedf0 50%,
              rgba(235, 237, 240, 0) 100%
            );
          }

          .count {
            display: flex;
            padding: 40rpx 56rpx;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8rpx;
            .num {
              color: #fff;
              text-align: center;
              font-size: 36rpx;
              font-weight: 700;
              line-height: 56rpx;
            }
            .title {
              color: #ebedf0;
              text-align: center;
              font-size: 24rpx;
              font-weight: 400;
              line-height: 32rpx;
            }
          }
        }
      }

      .list-box {
        flex: 1;
        background-color: #fff;
        border-radius: 32rpx 32rpx 0px 0px;
      }
    }
  }
</style>
